<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px auto;
            /*padding: 50px;*/
        }
        img{
            width: 100px;
            height: 100px;
            border: solid silver 4px;
        }
        .box1{
            width: 1030px;
            height: 300px;
            border: solid black 2px;
            background-color: white;
        }
        .li1{
            float: left;
            /*border: solid black 1px;*/
            list-style: none;
            margin: 10px;

        }
        .a{
            font-size: 16px;
            margin: 20px;
        }
        .aa{
            font-size: 16px;
            width: 50px;
            height: 50px;
            position: relative;
            top: -80px;
        }
        .bb{
            font-size: 12px;
            width: 50px;
            height: 50px;
            position: relative;
            top: -60px;
            left: -80px;

        }
        p{

            display: inline;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p class="a">影视社区热门小镇</p>
        <ul>
            <li class="li1"><img src="./img/pic_01.jpg" alt=""/>
                <p class="aa">风景狙击手</p>
                <p class="bb">成员：80</p>
                <p class="bb"style="position: relative;top: -40px;left: -135px">作品：276</p>

            </li>



            <li class="li1"><img src="./img/pic_02.jpg" alt=""/>
                <p class="aa">风景狙击手</p>
                <p class="bb">成员：80</p>
                <p class="bb"style="position: relative;top: -40px;left: -135px">作品：276</p>
            </li>
            <li class="li1"><img src="./img/pic_03.jpg" alt=""/>
                <p class="aa">风景狙击手</p>
                <p class="bb">成员：80</p>
                <p class="bb"style="position: relative;top: -40px;left: -135px">作品：276</p>
            </li>
            <li class="li1"><img src="./img/pic_04.jpg" alt=""/>
                <p class="aa">风景狙击手</p>
                <p class="bb">成员：80</p>
                <p class="bb"style="position: relative;top: -40px;left: -135px">作品：276</p>
            </li>
            <li class="li1"><img src="./img/pic_05.jpg" alt=""/>
                <p class="aa">风景狙击手</p>
                <p class="bb">成员：80</p>
                <p class="bb"style="position: relative;top: -40px;left: -135px">作品：276</p>
            </li>
            <li class="li1"><img src="./img/pic_06.jpg" alt=""/>
                <p class="aa">风景狙击手</p>
                <p class="bb">成员：80</p>
                <p class="bb"style="position: relative;top: -40px;left: -135px">作品：276</p>
            </li>
        </ul>
    </div>
</body>
</html>